<template>
  <el-dialog
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
    @close="closeDialog"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="form_rules"
      :label-width="dialog.formLabelWidth"
    >
      <el-row>
        <el-col :span="12" class="marginBottom">
          <el-form-item prop="caId" label="固定资产:">
            <!-- <el-input v-model="form.caId" type="text" /> -->
            <el-select
            :disabled="type === 'edit'"
              style="width: 100%"
              v-model="form.caId"
              clearable
              filterable
              @change="zicanChange"
            >
              <el-option
                v-for="(item, index) in getzicanList"
                :key="index"
                :label="item.caName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="marginBottom">
          <el-form-item prop="beforeAmount" label="折旧前金额:">
            <el-input disabled v-model="form.beforeAmount" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="marginBottom">
          <el-form-item prop="afterAmount" label="折旧后金额:">
            <el-input v-model="form.afterAmount" type="text" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="marginBottom">
          <el-form-item prop="tranDeptId" label="部门">
            <treeselect
              v-model="form.tranDeptId"
              :normalizer="normalizer"
              :options="rootOptionsSelect"
              placeholder=""
              @select="selectType"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="marginBottom">
          <el-form-item prop="tranUserName" label="经手人:">
            <el-select
              style="width: 100%"
              v-model="form.tranUserName"
              clearable
              filterable
              @change="userChange"
            >
              <el-option
                v-for="(item, index) in userList"
                :key="index"
                :label="item.loginName"
                :value="item.loginName"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12" class="">
          <el-form-item prop="bankId" label="付款银行:">
          <el-select
            style="width:100%"
            v-model="form.bankId"
            filterable
            clearable
            placeholder=""
          >
            <el-option
              v-for="item in basBankList"
              :key="item.bankAccount"
              :label="item.bankAccount"
              :value="item.bankAccount"
            >
            </el-option>
          </el-select>
        </el-form-item>
        </el-col> -->
        <el-col :span="24" class="marginBottom">
          <el-form-item prop="absStr" label="备注:">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入内容"
              v-model="form.absStr"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit('form')"> 提 交 </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getDepts } from "@/api/system/dept";
import { searchUser } from "@/api/system/user";
import {
  getByParent,
  addOrSave,
  caAddOrSave,
  basBank,
  getzican,
  addcaDiscountHis
} from "@/api/erp/fixedAssetsMain";
import { Treeselect } from "@riophae/vue-treeselect";
// import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getToken } from "@/utils/auth";
export default {
  name: "AddDialogs",
  props: {
    isShow: Boolean,
    title: String,
    type: String,
    currentId: String,
    dialogRow: Object
  },
  components: {
    Treeselect
  },
  data() {
    return {
      isVisible: this.isShow,
      form: {
        tranDeptId: null,
        tranDeptCode: null,
        caId: null,
        beforeAmount: null,
        tranUserName: null,
        afterAmount: null,
        bankId: null,
        absStr: null,
        id:null
      },
      basBankList: [], //银行账户
      getzicanList: [],
      disabel: false,
      rootOptionsSelect: [],
      userList: [],
      form_rules: {
        caId: [{ required: true, message: "不能为空！", trigger: "change" }],
        beforeAmount: [
          { required: true, message: "不能为空！", trigger: "change" }
        ],
        tranDeptId: [
          { required: true, message: "不能为空！", trigger: "change" }
        ],
        afterAmount: [
          { required: true, message: "不能为空！", trigger: "blur" },
          {
            pattern: /(^(([1-9]{1}[0-9]*)|([0]{1}))([.]{1}[0-9]{2})$)/,
            message: "价格格式不对，格式如： 1.00",
            trigger: "change"
          } // 可以输入多位正整数]
        ],
        tranUserName: [
          { required: true, message: "不能为空！", trigger: "blur" }
        ],
        amount: [
          { required: true, message: "不能为空！", trigger: "blur" },
          {
            pattern: /(^(([1-9]{1}[0-9]*)|([0]{1}))([.]{1}[0-9]{2})$)/,
            message: "价格格式不对，格式如： 1.00",
            trigger: "change"
          } // 可以输入多位正整数]
        ]
      },
      // 详情弹框信息
      dialog: {
        width: "800px",
        formLabelWidth: "120px"
      },
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: getToken() },
        // 上传的地址
        url: "",
        // 上传的文件列表
        fileList: [],
        fileList1: [],
        // 公章图片列表
        stampImgList: [],
        // 门店图片列表
        imageList: []
      },
      imageUrl: []
    };
  },
  computed: {},
  created() {
    this.upload.url =
      window.location.href
        .split("/")
        .slice(0, 3)
        .join("/") + "/api/common/uploadImage";
    this.getRootModels();
  },
  mounted() {
    if (this.type === "edit") {
      this.form = this.dialogRow;
      this.form.beforeAmount = Number(this.dialogRow.beforeAmount.toString()).toFixed(2)
      this.form.afterAmount = Number(this.dialogRow.afterAmount.toString()).toFixed(2)
      this.disabel = true;
    } else {
      this.disabel = false;
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
    }
    this.getbasBank();
    this.getzican();
  },
  methods: {
    setUrl(val) {
      this.imageUrl.push(val.data.path);
      this.form.attachFileList = JSON.stringify(this.imageUrl);
    },
    closeDialog() {
      this.$emit("closeDialog");
    },
    // 表单提交
    onSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          // 表单数据验证完成之后，提交数据;
          let formData = this.form;
          formData.typeId = this.currentId;
          const para = { ...formData };
          console.log(para);
          // edit
          if (this.type === "edit") {
            addcaDiscountHis(para).then(res => {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.$refs.form.resetFields();
              this.isVisible = false;
              this.$emit("getFundList");
            });
          } else {
            // add
            para.id = null
            addcaDiscountHis(para).then(res => {
              this.$message({
                message: "新增成功",
                type: "success"
              });
              this.$refs.form.resetFields();
              this.isVisible = false;
              this.$emit("getFundList");
            });
          }
        }
      });
    },
    // 获取资产
    getzican() {
      const para = {};
      getzican(para).then(res => {
        for (let index = 0; index < res.data.content.length; index++) {
          const element = res.data.content[index];
          if (element.caStatus === "启用" || element.caStatus === "折旧中") {
            this.getzicanList.push(element);
          }
        }
      });
    } /** 获取部门 **/,
    // 银行账户
    getbasBank() {
      const para = {};
      basBank(para).then(res => {
        this.basBankList = res.data.content;
      });
    } /** 获取部门 **/,
    getRootModels() {
      const sort = "id,desc";
      const params = { sort: sort };
      if (this.deptName) {
        params["name"] = this.deptName;
      }
      getDepts(params).then(res => {
        this.rootOptionsSelect = res;
      });
    },
    // 选择部门
    selectType(node, instanceId) {
      console.log(node, instanceId, "新增选择节点");
      this.form.tranDeptCode = node.code;
      this.form.tranDeptId = node.id;
      this.form.tranDeptName = node.name;
      this.seachUser(node.id);
    },
    userChange(val) {
      console.log(val);
      this.form.tranUserName = val;
    },
    zicanChange(val) {
      console.log(val);
      this.getzicanList.map(item => {
        if (item.id == val) {
          this.form.beforeAmount = item.price;
        }
      });
    },
    seachUser(deptId) {
      this.userList = [];
      this.form.tranUserName = "";
      searchUser({ deptId: deptId }).then(res => {
        this.userList = res.data.content;
      });
    },
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.marginBottom {
  margin-bottom: 12px !important;
}
.addImg {
  font-size: 60px;
  border: rgb(203, 203, 203) 1px dashed;
  width: 102px;
  height: 102px;
  cursor: pointer;
  margin-top: 2px;
}
</style>
